<script setup>
  import {reactive , ref } from 'vue'
  /**
   *  响应式基础: 如何将数据变成响应式
   *  vue提供的响应式工具进行处理: 
   *    1. ref  处理任何数据类型 (基本类型,引用类型,数组类型)  [推荐]
   *    2. reactive 处理引用数据类型 (不能用于基本类型, 引用类型,数组类型) [const]]
   *  ref的问题: script不能直接使用响应式属性  .value
   *  ref的优点: 任何数据类型可以,可以替换整体值
   *    let counter = ref(0); 0->1 可以直接
   *    let person  = ref({});
   *    let stars   = ref([]) 
   *  ref的使用: 
   *    1. 引入ref方法从,vue中
   *    2. ref方法将数据变成响应式数据
   *    3. 使用响应式数据
   *       script : 不能直接修改 counter.value.xxx
   *       template : 直接获取 counter.xxx
   * 
   *  reactive的问题: 他处理值,不能进行地址值更换!
   *  reactive的优点: 可以直接使用 let person  = reactive({name:"zhangsan"}) || person.name
   *    let counter = reactive(0);  0 - > 1  不能使用
   *    let person  = reactive({name:"zhangsan"})
   *        person.name ="李四";  可以使用
   *        person = {"name":"李四"}; 不能使用
   *    let stars  = reactive(["","",""]);
   *        stars.push("xx");  可以使用
   *        stars = []; 不可以使用
   *  reactive使用: 
   *    1. 引入reactive方法 import {reactive } from 'vue'
   *    2. 数据进行包裹,变成响应式
   *    3. 修改响应式数据即可
   *       script : 直接修改 counter.xxx
   *       template : 直接获取 counter.xxx
   */ 


   //计数器  数字 + 两个方法 + - 
   let counter = reactive({count:0}) ;
   let counter1 = ref(0) ;

   let add = ()=>{
       counter.count++;
       counter1.value++;
   }  

   let sub = ()=>{
       counter.count--;
       counter1.value--;
   }  
</script>

<template>
  <div>
        <button @click="sub()">-</button>
        {{ counter.count}} || {{counter1}}
        <button @click="add()">+</button>
  </div>
</template>

<style scoped>

</style>